<template>
  <div id="home">
    <head-top signin-up="home">
      <span slot="logo" class="head-logo" @click="reload">ele.me</span>
    </head-top>
    <nav class="city-nav">
      <div class="city-tip">
        <span>当前定位城市：</span>
        <span>定位不准时，请在城市列表中选择</span>
      </div>
      <!-- 后端这个接口有问题 所以将guesscity及其id先写死 -->
      <router-link :to="'/city/' + guessCityid" class="guess-city">
        <span v-if="guessCity">{{ guessCity }}</span>
        <span v-else>邵阳</span>
        <icon-svg icon-class="iconarrow-left" class="icon-left"></icon-svg>
      </router-link>
    </nav>
    <section class="hot-city-container">
      <h4 class="city-title">热门城市</h4>
      <ul class="city-ul">
        <router-link
          tag="li"
          v-for="item in hotcity"
          :key="item.id"
          :to="'/city/' + item.id"
          class="city-item"
        >
          {{ item.name }}
        </router-link>
      </ul>
    </section>
    <section class="all-city-container">
      <ul class="letter-classify">
        <li
          v-for="(value, key, index) in sortgroupcity"
          :key="key"
          class="letter-classify-li"
        >
          <h4 class="city-title">
            {{ key }}
            <span v-if="index == 0">（按字母排序）</span>
          </h4>
          <ul class="city-ul">
            <router-link
              tag="li"
              v-for="item in value"
              :key="item.id"
              :to="'/city/' + item.id"
              class="city-item ellipsis"
            >
              {{ item.name }}
            </router-link>
          </ul>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import headTop from "@/components/header/head";
import { getHotCity, getAllCity } from "@/network/getData";
export default {
  name: "home",
  data() {
    return {
      guessCity: "", //当前城市
      guessCityid: 173, //当前城市id
      hotcity: [], //热门城市列表
      groupcity: {}, //所有城市列表
    };
  },
  components: {
    headTop,
  },
  created() {},
  mounted() {
    getHotCity().then((res) => {
      this.hotcity = res;
    });
    getAllCity().then((res) => {
      this.groupcity = res;
    });
  },
  methods: {
    reload() {
      window.location.reload();
    },
  },
  computed: {
    sortgroupcity() {
      let sortobj = {};
      for (let i = 65; i <= 90; i++) {
        if (this.groupcity[String.fromCharCode(i)]) {
          sortobj[String.fromCharCode(i)] = this.groupcity[
            String.fromCharCode(i)
          ];
        }
      }
      return sortobj;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/mixin";

.head-logo {
  left: 0.4rem;
  font-weight: 400;
  @include sc(0.7rem, #ffffff);
  @include ct;
}

.city-nav {
  padding-top: 1.95rem;
  background-color: #fff;
  margin-bottom: 0.4rem;

  .city-tip {
    @include fj;
    align-items: center;
    height: 1.45rem;
    padding: 0 0.55rem;

    span:nth-of-type(1) {
      @include sc(0.55rem, #666);
    }

    span:nth-of-type(2) {
      @include sc(0.475rem, #666);
      font-weight: 900;
    }
  }

  .guess-city {
    @include fj;
    height: 1.25rem;
    border-top: 1px solid $bc;
    border-bottom: 2px solid $bc;
    align-items: center;
    padding: 0 0.5rem;

    .icon-left {
      color: #999;
      font-size: 0.8rem;
    }

    span:nth-of-type(1) {
      @include sc(0.55rem, #666);
    }

    span:nth-of-type(2) {
      @include sc(0.7rem, #666);
    }
  }
}

.hot-city-container {
  border-top: 2px solid $bc;
  background-color: #fff;
  margin-bottom: 0.4rem;
}

.city-title {
  height: 1.45rem;
  line-height: 1.45rem;
  @include sc(0.55rem, #666);
  padding-left: 0.5rem;
  border-bottom: 1px solid $bc;
}

.city-ul {
  display: flex;
  flex-wrap: wrap;

  .city-item {
    line-height: 1rem;
    text-align: center;
    @include wh(25%, 1rem);
    font-size: 0.45rem;
    color: #3190e8;
    border-bottom: 1px solid $bc;
    border-right: 1px solid $bc;

    &:nth-child(4n) {
      border-right: none;
    }
  }
}

.all-city-container {
  .city-ul {
    .city-item {
      color: #000;
    }
  }
}
</style>
